
<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>房屋信息系统</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>

    <link rel="stylesheet" href="../css/index.css" />



    <meta charset="utf-8">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>
<div id="wrap">
    <nav class="navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="../index.html">Shakespeare</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="../search.html">我是租客</a></li>
                    <li><a href="#">我是房东</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-top navbar-right">
                    <button class="btn1" data-toggle="modal" data-target="#login">
                        登录
                    </button>
                    <button class="btn1" data-toggle="modal" data-target="#register">
                        注册
                    </button>
                </ul>

            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container-fluid">
        <style type="text/css">
            ol.progtrckr {
                margin: 0;
                padding: 0;
                list-style-type none;
            }
            ol.progtrckr li {
                display: inline-block;
                text-align: center;
                line-height: 3em;
            }
            ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
            ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
            ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
            ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
            ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
            ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
            ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
            ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

            ol.progtrckr li.progtrckr-done {
                color: black;
                border-bottom: 4px solid yellowgreen;
            }
            ol.progtrckr li.progtrckr-todo {
                color: silver;
                border-bottom: 4px solid silver;
            }
            ol.progtrckr li:after {
                content: "\00a0\00a0";
            }
            ol.progtrckr li:before {
                position: relative;
                bottom: -2.5em;
                float: left;
                left: 50%;
                line-height: 1em;
            }
            ol.progtrckr li.progtrckr-done:before {
                content: "\2713";
                color: white;
                background-color: yellowgreen;
                height: 1.2em;
                width: 1.2em;
                line-height: 1.2em;
                border: none;
                border-radius: 1.2em;
            }
            ol.progtrckr li.progtrckr-todo:before {
                content: "\039F";
                color: silver;
                background-color: white;
                font-size: 1.5em;
                bottom: -1.6em;
            }
        </style>
        <div class="demo" width="80%">
            <ol class="progtrckr" data-progtrckr-steps="5">
                <li class="progtrckr-done">Step 1</li>
                <li class="progtrckr-done">Step 2</li>
                <li class="progtrckr-done">Step 3</li>
                <li class="progtrckr-done">Step 4</li>
                <li class="progtrckr-done">Step 5</li>
            </ol>
        </div>
        <br>
        <br>
        <div class="modal-body">

            <div class="center">
                <a href="upload4.html">
                     <button type="button" class="btn btn-default" data-dismiss="modal" >上一步
                </button></a>
            <button class="btn btn-primary" data-toggle="modal" data-target="#commit">
                提交
            </button>
        </div>

        </div>
    </div>


    <div class="modal fade" id="commit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>

                </div>
                <div class="modal-body">
                    <div class="main">
                        成功！
                        等待管理员进行审核
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
    </div>



    <div class="footer">
        <div class="container" style="padding: 20px;">
            <p class="muted credit">Produced By Morroc.</p>
        </div>
    </div>




    <!-- 模态框（Modal） -->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        用户登录
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="main">
                        <center><div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-primary1" id="op1">
                                <input type="radio" name="options"> 我是租客
                            </label>
                            <label class="btn btn-primary1" id="op2">
                                <input type="radio" name="options"> 我是房东
                            </label>
                        </div></center>
                        <br>
                        <div class="form-group">
                            <label>用户名
                                <input type="text" class="form-control"/>
                            </label>
                        </div>
                        <div class="form-group">
                            <label>密码
                                <input type="password" class="form-control"/>
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary">
                            登录
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>

    <div class="modal fade" id="register" index="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        新用户注册
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="main">
                        <div class="center">
                            <center> <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-primary1"  id="option1">
                                    <input type="radio" name="options"> 我是租客
                                </label>
                                <label class="btn btn-primary1" id="option2">
                                    <input type="radio" name="options"> 我是房东
                                </label>
                            </div></center>
                            </br>
                            <div class="form-group">
                                <label>用户名
                                    <input type="text" class="form-control"/>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>确认密码
                                <input type="password"  class="form-control"  placeholder=""/>
                            </label>
                        </div>
                        <div class="form-group">
                            <label>姓名
                                <input type="text" class="form-control"/>
                            </label>
                        </div>

                        <div class="form-group">
                            <label>身份证号码
                                <input type="text" class="form-control"/>
                            </label>
                        </div>
                            <div class="form-con">
                                <label>手机号
                                    <input type="text"   class="form-control"/>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary">
                            注册
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>


</div>

<script>
    var op1 = document.getElementById('op1');
    var op2 = document.getElementById('op2');
    op1.onclick = function() {
        this.style.backgroundColor = '#337ab7';
        this.style.color = 'white';
        op2.style.backgroundColor = '#F8F8F8';
        op2.style.color = 'black';
    };
    op2.onclick = function() {
        this.style.backgroundColor = '#337ab7';
        this.style.color = 'white';
        op1.style.backgroundColor = '#F8F8F8';
        op1.style.color = 'black';
    };

    var option1 = document.getElementById('option1');
    var option2 = document.getElementById('option2');
    option1.onclick = function() {
        this.style.backgroundColor = '#337ab7';
        this.style.color = 'white';
        option2.style.backgroundColor = '#F8F8F8';
        option2.style.color = 'black';
    };
    option2.onclick = function() {
        this.style.backgroundColor = '#337ab7';
        this.style.color = 'white';
        option1.style.backgroundColor = '#F8F8F8';
        option1.style.color = 'black';
    }
</script>



</body>



</html>